<template>
  <div class="staffCompile">
    <el-row class="staffCompile-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span" v-if="staffType=='staffType_Add'">{{staffManagement.staffAdd}}</span>
      <span
        class="height40-span"
        v-if="staffType=='staffType_Detail'"
      >{{staffManagement.staffDetail}}</span>
    </el-row>
    <el-row class="staffCompile-b">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item :label="staffManagement.loginID" prop="loginID">
          <el-input v-model.trim="ruleForm.loginID" :disabled="detailDisabled" autocomplete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="staffManagement.familyNameSpell" prop="familyNameSpell">
              <el-input v-model.trim="ruleForm.familyNameSpell" maxlength="9" :disabled="detailDisabled" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="staffManagement.nameSpell" prop="nameSpell">
              <el-input v-model.trim="ruleForm.nameSpell" maxlength="9" :disabled="detailDisabled" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="staffManagement.familyName" prop="familyName">
              <el-input v-model.trim="ruleForm.familyName" maxlength="9" :disabled="detailDisabled" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="staffManagement.name" prop="name">
              <el-input v-model.trim="ruleForm.name" maxlength="9" :disabled="detailDisabled" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="staffManagement.duty" prop="duty">
          <el-select
            v-model="ruleForm.duty"
            :disabled="detailDisabled"
            :placeholder="staffManagement.selectDuty"
            class="select100"
            @change="changeSelectDuty"
          >
            <el-option
              v-for="(item,index) in dutyOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item :label="staffManagement.authority" prop="authority">
          <el-select
            v-model="ruleForm.authority"
            :placeholder="staffManagement.selectAuthority"
            class="select100"
            :disabled="true"
          >
            <el-option
              v-for="(item,index) in authorityOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-row>
            <el-col :span="12">
              <Kt-button
                class="cancelBtn boxShadowButton"
                :size="size"
                :label="staffManagement.cancel"
                @click="cancel"
              ></Kt-button>
            </el-col>
            <el-col :span="12" align="right">
              <Kt-button
                v-if="detailFlag==true"
                type="success"
                class="boxShadowButton"
                :size="size"
                :label="staffManagement.edit"
                @click="handleClick"
              ></Kt-button>
              <Kt-button
                v-if="detailFlag==false"
                class="submitBtn boxShadowButton"
                :size="size"
                :label="staffManagement.update"
                @click="submitForm('ruleForm')"
              ></Kt-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
export default {
  name: "StaffCompile",
  data() {
    return {
      staffManagement: this.$t("m.staffManagement"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      image: { juxing_Small },
      ruleForm: {
        loginID: "", //登录id
        familyNameSpell: "", //姓（拼音） 
        nameSpell: "", //名（拼音）
        familyName: "", //姓
        name: "", //名
        duty: "", //职务
        authority: "", //权限
        userId:"",//修改的时候需要传userid
      },
      dutyOptions: [], //职务集合
      authorityOptions: [
        { label: this.$t("m.staffManagement").authorityGeneral, value: "1" },
        { label: this.$t("m.staffManagement").authorityAdvanced, value: "2" }
      ], //权限的集合
      staffType: "",
      groupId:"",
      detailFlag:false,
      detailDisabled:false,
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    /* 
      取消
    */
    cancel() {
      console.log("跳转");
      if (this.staffType == "staffType_Detail") {
        sessionStorage.removeItem("staffUserId");
      }
      sessionStorage.removeItem("staffType"); //返回到工作人员列表页面就移除staffType
      bus.$emit("homePage", {
        type: "remove",
        path: "/StaffCompile",
        showpath: "/StaffManagement"
      });
    },

    /* 
      编辑
    */
    handleClick(){
      this.detailFlag=false;
      this.detailDisabled=false;
    },

    /* 
      选择职务
    */
    changeSelectDuty(val){
      console.log(val);
      this.dutyOptions.forEach(item=>{
        console.log(item)
        if(item.value==val){
          if(item.roleCode=="home_JP"){
            console.log('-----')
            this.$set(this.ruleForm,"authority","2")
          }else if(item.roleCode=="nursing_JP"){
            console.log('===')
            this.$set(this.ruleForm,"authority","1")
          }
        }
      })
      console.log(this.ruleForm.authority)
    },

    /* 
      新增  或者 修改
    */
    submitForm(datainfo) {
      console.log(datainfo, "------");
      this.$refs[datainfo].validate(valid => {
        if (valid) {
          let params = new Object();
          if(this.staffType == "staffType_Detail"){
            params.userId=this.ruleForm.userId;
          }
          params.loginName = this.ruleForm.loginID;
          params.secFirstName = this.ruleForm.familyNameSpell;
          params.secSecondName = this.ruleForm.nameSpell;
          params.firstName = this.ruleForm.familyName;
          params.secondName = this.ruleForm.name;
          params.actionName = this.ruleForm.authority;
          params.roleId = this.ruleForm.duty;
          console.log(params);
          let url="";
          url=this.staffType == "staffType_Detail" ? this.ports.staffManagement.editLifeUser : this.ports.staffManagement.addLifeUser
          this.$postJson(url, params,this.acceptLanguage).then(
            res => {
              console.log(res);
              if (res.code == 200) {
                this.$message({ message: res.message, type: "success" });
                if (this.staffType == "staffType_Detail") {
                  sessionStorage.removeItem("staffUserId");
                }
                sessionStorage.removeItem("staffType"); //返回到工作人员列表页面就移除staffType
                setTimeout(() => {
                  bus.$emit("homePage", {
                    type: "remove",
                    path: "/StaffCompile",
                    showpath: "/StaffManagement"
                  });
                  bus.$emit("refreshStaffList"); //通知工作人员列表的刷新
                }, 100);
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            }
          );
        } else {
          console.log("提交失败!");
          return false;
        }
      });
    },

    /* 
      查询工作人员详情
    */
    selectLifeUser(userId) {
      this.$postJson(this.ports.staffManagement.selectLifeUser + userId,{},this.acceptLanguage).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            this.ruleForm.loginID = res.result.loginName;
            this.ruleForm.familyNameSpell = res.result.secFirstName;
            this.ruleForm.nameSpell = res.result.secSecondName;
            this.ruleForm.familyName = res.result.firstName;
            this.ruleForm.name = res.result.secondName;
            this.ruleForm.duty = res.result.roleId;
            this.ruleForm.authority = res.result.actionName!=null ? res.result.actionName : '2';//需要判断一下 因为运营平台上面机构初始化添加的的工作人员  actionName为null  权限默认就会高级---2
            this.ruleForm.userId= res.result.userId;
          }
        }
      );
    },

    /* 
      获取该机构初始化的所有的角色
    */
    getRoleInfo(groupId) {
      this.dutyOptions=[];
      this.$postJson("uac/group/queryRoleListByGroupId/" + groupId,{},this.acceptLanguage).then(
        res => {
          console.log(res);
          if (res.result.length > 0 || res.result != null) {
            res.result.forEach(item => {
              console.log(item, "----------");
              let roleObj = {};
              roleObj.label=item.roleName;//角色名称
              roleObj.roleCode=item.roleCode;//角色编码
              roleObj.value=item.id;//角色id
              this.dutyOptions.push(roleObj);
            });
          }
        }
      );
    }
  },
  computed: {
    //使用computed计算属性来操作form表单规则的国际化
    rules() {
      //此处的rules 是你声明的名字，参考下图
      var validate_Types = (rule, value, callback) => {
        //登录id的规则
        if (this.ruleForm.loginID == "") {
          callback(new Error(this.$t("m.staffManagement.empty")));
        }
        callback();
      };
      return {
        staffManagement: this.$t("m.staffManagement"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        loginID: [
          { required: true, validator: validate_Types, trigger: "blur" },
          { min: 1, max: 20, message: this.$t("m.staffManagement.length20") },
          {
            pattern: /^[A-Za-z0-9~!@#$%^&*()/\|,.<>?‘`"'();:_+-=\[\]{}]+$/,
            message: this.$t("m.staffManagement.notChineseMessage")
          }
        ],
        familyNameSpell: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 9,
            message: this.$t("m.staffManagement.length9"),
            trigger: "blur"
          },
          {
            pattern: /^[ァ-ヶ一]+$/,
            message: this.$t("m.staffManagement.name_limit")
          }
        ],
        nameSpell: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 9,
            message: this.$t("m.staffManagement.length9"),
            trigger: "blur"
          },
          {
            pattern: /^[ァ-ヶ一]+$/,
            message: this.$t("m.staffManagement.name_limit")
          }
        ],
        familyName: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 9,
            message: this.$t("m.staffManagement.length9"),
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "blur"
          },
          {
            min: 1,
            max: 9,
            message: this.$t("m.staffManagement.length9"),
            trigger: "blur"
          }
        ],
        duty: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "change"
          }
        ],
        authority: [
          {
            required: true,
            message: this.$t("m.staffManagement.empty"),
            trigger: "change"
          }
        ]
      };
    }
  },
  created() {
    this.groupId=sessionStorage.getItem("groupId");
  },
  mounted() {
    this.staffType = sessionStorage.getItem("staffType");
    let userId = sessionStorage.getItem("staffUserId");
    //点击详情按钮跳转过来才调取工作人员详情接口
    if (this.staffType == "staffType_Detail") {
      this.selectLifeUser(userId);
      this.detailFlag=true;
      this.detailDisabled=true;
    }else{
      this.detailFlag=false;
      this.detailDisabled=false;
    }
    console.log(this.detailFlag);
    this.getRoleInfo(this.groupId);
  },
  components: {
    KtButton
  }
};
</script>
<style lang="scss" scoped>
.staffCompile {
  padding-bottom: 20px;
  .height40 {
    height: 40px;
    line-height: 40px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .staffCompile-b {
    width: 50%;
    padding: 40px 30px;
    .select100 {
      width: 100%;
    }
    /* 取消按钮  修改样式 添加阴影 */
    .cancelBtn {
      background: #dddddd;
      color: #010101;
    }
    /* 更新按钮  修改样式  添加阴影 */
    .submitBtn {
      background: #E6A23C;
      color: #ffffff;
    }
  }
}
/* 修改element-ui input文本框默认的样式 */
/deep/ .staffCompile-b .el-input__inner {
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 1px solid #999999 !important;
  background-color: #f6f6f6 !important;
}

/* 修改每一个form表单小项的margin */
/deep/ .staffCompile-b .el-form-item {
  margin-bottom: 42px !important;
}

/* 修改element-ui 表格label的样式 */
/deep/ .staffCompile-b .el-form-item__label {
  padding: 0 0 0px !important;
  line-height: 10px !important;
  color: #0000ff !important;
}
</style>